<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>React 17 复杂嵌套结构</title>
	</head>
	<body>
		
		<div id="app"></div>
		
		<script src="./js/react17.development.js"></script>
		<script src="./js/react-dom17.development.js"></script>
		
		<script>
			let app = document.querySelector("#app")
			
			let small = React.createElement("small", {}, "作者:高鼎")
			let h1 = React.createElement("h1", {id: "title"}, "村居", small)
			
			let p1 = React.createElement("p", {}, "草长莺飞二月天")
			let p2 = React.createElement("p", {}, "拂堤杨柳醉春烟")
			let p3 = React.createElement("p", {}, "儿童散学归来早")
			let p4 = React.createElement("p", {}, "忙趁东风放纸鸢")
			let div = React.createElement("div",{id: "pea"}, h1, p1, p2, p3, p4)
			
			ReactDOM.render(div, app)
			// 思考：Vue2.x中为什么template中只允许出现一个根标签？
		</script>
	</body>
</html>